import React, { memo, FC, Fragment } from 'react'
import { Link } from 'react-router-dom'

import './style.less'

interface IProps {
  title: string
  hasMore?: boolean
  content?: string[]
  path?: string
}

const ThemeMenu: FC<IProps> = (props) => {
  const { title, path = '', hasMore, content = [] } = props
  const len = content.length - 1
  return (
    <div className="theme-menu sprite_02 flex-1">
      <div className="title">
        <Link to={path}>{title}</Link>
      </div>
      {content.length ? (
        <div className="content ">
          {content.map((v, i) =>
            i === len ? (
              <Link
                className="hover-text name"
                to={`/discover/playlist/?cat=${v}`}
                key={v}
              >
                {v}
              </Link>
            ) : (
              <Fragment key={v}>
                <Link
                  to={`/discover/playlist/?cat=${v}`}
                  className="hover-text name"
                >
                  {v}
                </Link>
                <span className="line">|</span>
              </Fragment>
            )
          )}
        </div>
      ) : null}

      {hasMore && (
        <span className="more flex-2">
          <Link className="hover-text" to={path}>
            更多
          </Link>
          <i className="icon sprite_02  "></i>
        </span>
      )}
    </div>
  )
}

export default memo(ThemeMenu)
